<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../static/js/pdf.js"></script>
    <script type="text/javascript" src="../static/js/bootstrap.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.css">
    <script type="text/javascript">
        $(function () {
            // 上传文件
            $('#preview').on('click', function () {
                var files = $('#word1')[0].files
                if (files.length <= 0) {
                    return alert('请选择文件后再上传！')
                }
                console.log(";;;;;")

                var fd = new FormData()
                fd.append('file', files[0])
                fd.append('filename', $('#word').val())
                console.log(fd)

                // 发起 jQuery 的 Ajax 请求，上传文件
                $.ajax({
                    method: 'POST',
                    url: 'convertToPdf',
                    data: fd,
                    processData: false,
                    contentType: false,
                    // -------- 只要是上传文件这两个属性值，一定要设置为false，这是固定写法
                    success: function (result) {
                        console.log(result)
                        if (result.code == "0") {
                            window.location.href = result.body;
                            // window.location.href = "http://localhost:8900/pdf/test.pdf";
                        } else {
                            alert(result.message);
                        }
                    }
                })
            })
            // 添加水印
            $('#watermark').on('click', function () {
                var files = $('#word2')[0].files
                if (files.length <= 0) {
                    return alert('请选择文件后再上传！')
                }
                console.log(";;;;;")

                var fd = new FormData()
                fd.append('file', files[0])
                fd.append('text', $('#text').val() == '' ? $('#text').attr('placeholder') : $('#text').val())
                fd.append('num', $('#num').val() == '' ? $('#num').attr('placeholder') : $('#num').val())
                fd.append('fontSize', $('#fontSize').val() == '' ? $('#fontSize').attr('placeholder') : $('#fontSize').val())
                fd.append('textColor', $('#textColor').val() == '' ? $('#textColor').attr('placeholder') : $('#textColor').val())
                console.log(fd)

                // 发起 jQuery 的 Ajax 请求，上传文件
                $.ajax({
                    method: 'POST',
                    url: 'watermark',
                    data: fd,
                    processData: false,
                    contentType: false,
                    // -------- 只要是上传文件这两个属性值，一定要设置为false，这是固定写法
                    success: function (result) {
                        console.log(result)
                        if (result.code == "0") {
                            $("#waterdownload").attr("href", result.body);
                        } else {
                            alert(result.message);
                        }
                    }
                })
            })
            // 填充数据
            $('#template').on('click', function () {
                var files = $('#word3')[0].files
                if (files.length <= 0) {
                    return alert('请选择文件后再上传！')
                }
                console.log(";;;;;")

                var fd = new FormData()
                fd.append('file', files[0])
                fd.append('data', $('#data').val() == '' ? $('#text').attr('placeholder') : $('#data').val())
                fd.append('example', $('#example').val() == '' ? $('#text').attr('placeholder') : $('#example').val())
                console.log(fd)

                // 发起 jQuery 的 Ajax 请求，上传文件
                $.ajax({
                    method: 'POST',
                    url: 'template',
                    data: fd,
                    processData: false,
                    contentType: false,
                    // -------- 只要是上传文件这两个属性值，一定要设置为false，这是固定写法
                    success: function (result) {
                        console.log(result)
                        if (result.code == "0") {
                            $("#waterdownload").attr("href", result.body);
                        } else {
                            alert(result.message);
                        }
                    }
                })
            })
        })
    </script>

</head>
<body>

<br><br><br>
<div class="col-lg-6" style="text-align: center;margin-left: 25%">
    <div class="input-group mb-3 col-lg-6" style="text-align: center">
        <input type="file" class="form-control" id="word1">
        <label class="input-group-text" for="word1">上传word</label>
    </div>
    <button id="preview" type="button" class="btn btn-primary">预览word</button>
    <br>
    <hr>
    <div class="input-group mb-3 col-lg-6" style="text-align: center">
        <input type="file" class="form-control" id="word2">
        <label class="input-group-text" for="word2">上传word</label>
    </div>
    <div class="input-group mb-3 col-lg-6" style="text-align: center">
        <label class="input-group-text">页面最终的行数可能不等于3，因为水印旋转会导致一页中的行数发生变化</label>
        <br>
        <label class="input-group-text" for="num">行数(>=3)</label>
        <input type="text" class="form-control" id="num" placeholder="3">
        &nbsp;&nbsp;
        <label class="input-group-text" for="text">文本</label>
        <input type="text" class="form-control" id="text" placeholder="水印">
        &nbsp;&nbsp;
        <label class="input-group-text" for="fontSize">大小</label>
        <input type="text" class="form-control" id="fontSize" placeholder="10">
        &nbsp;&nbsp;
        <label class="input-group-text" for="textColor">颜色</label>
        <input type="text" class="form-control" id="textColor" placeholder="#d8d8d8">
    </div>
    <button id="watermark" type="button" class="btn btn-primary">添加水印</button>
    <br>
    <hr>
    <div class="input-group mb-3 col-lg-6" style="text-align: center">
        <input type="file" class="form-control" id="word3">
        <label class="input-group-text" for="word3">上传word</label>
    </div>
    <div class="input-group mb-3 col-lg-6" style="text-align: center">

        <label class="radio-button" for="example">是否使用示例数据</label>
        <input type="radio" class="form-control" id="example" value="true">
        <input type="radio" class="form-control" id="example" value="false">
    </div>
    <div class="input-group mb-3 col-lg-6" style="text-align: center">
        <label class="input-group-text" for="textColor">数据</label>
        <textarea class="form-control" id="data" placeholder="json格式"></textarea>
    </div>
    <button id="template" type="button" class="btn btn-primary">填充数据</button>
    &nbsp;&nbsp;
    <a id="waterdownload" class="btn btn-primary" href="#">下载</a>
</div>
<!--<a href="../pdfjs/web/viewer.html?file=pages/test.pdf">Open</a>-->
</body>
</html>
